<template>

  <div class="header">
    <img id="return" src="https://sweetchenda.oss-cn-beijing.aliyuncs.com/20250728192143389.png" alt=""
      @click="back"></img>
    <div class="search">
      <input type="text" placeholder="输入搜索..."></input>
      <span class="iconfont icon-sousuo"></span>
    </div>
    <ul class="text">
      <li>关于</li>
      <li>工具</li>
      <li>帮助</li>
    </ul>
    <ul class="picture">
      <li><span class="iconfont icon-xiaoxi"></span>
        <div class="circle">12</div>
      </li>
      <li><span class="iconfont icon-duanxin"></span>
        <div class="circle">7</div>
      </li>
      <li><span class="iconfont icon-lianxiren"></span>
        <div class="circle">5</div>
      </li>
    </ul>
    <div class="title">
      <p>Hello,{{ username }}</p>
      <img :src="avatar" alt="" @click="goToChangePassword">
    </div>
  </div>
</template>

<script setup lang="ts" name="AppHeader">
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import request from '@/utils/http'

interface UserInfo {
  code: string
  data: {
    nickname: string
    avatar: string
  }
}

const router = useRouter()
const username = ref('')
const avatar = ref('')
function back() {
  router.push('/login')
}
function goToChangePassword() {
  router.push('/changepsd')
}
onMounted(() => {
  getUserInfo()
})
async function getUserInfo() {
  try {
    const response = await request.get('/auth/user/info') as UserInfo
    // console.log(response);
    if (response.code === "0") {
      username.value = response.data.nickname
      avatar.value = response.data.avatar
    } else {
      username.value = '未知用户'
      avatar.value = 'https://sweetchenda.oss-cn-beijing.aliyuncs.com/20250728192224841.png'
      console.log('发生了一些错误！');
    }
  } catch (error) {
    username.value = '加载失败'
    avatar.value = 'https://sweetchenda.oss-cn-beijing.aliyuncs.com/20250728192224841.png'
    console.error('获取用户信息失败:', error);
  }
}
</script>

<style scoped>
img,
li,
span {
  cursor: pointer;
}

.header {
  display: flex;
  width: 1650px;
  height: 117px;
  background-color: #FFFFFF;
  align-items: center;
  padding-left: 21px;
  margin-bottom: 12px;
}

.header img {
  height: 53px;
  width: 40px;
  margin-right: 30px;
}

.search {
  width: 762px;
  height: 56px;
  display: flex;
  position: relative;
  margin-right: 70px;
}

.search input {
  width: 762px;
  height: 56px;
  border-radius: 8px;
  border: 2px solid #D7D7D7;
  ;
  padding-left: 30px;
}

.search input::placeholder {
  color: #D7D7D7;
  font-size: 18px;
}

.search span {
  position: absolute;
  right: 20px;
  top: 6px;
  font-size: 30px;
  color: #006DB8;
}

.header .picture li {
  position: relative;
}

.header .picture li .circle {
  position: absolute;
  text-align: center;
  border: 3px solid #FFFFFF;
  padding-top: 2px;
  top: -20%;
  right: -20%;
  color: #FFFFFF;
  font-size: 13px;
  width: 26px;
  height: 26px;
  background-color: #006DB8;
  border-radius: 50%;
  z-index: 10;
}

.header .picture li:nth-child(3) .circle {
  background-color: #EC808D;
}

.header .text {
  display: flex;
  margin-top: 6px;
}

.header .text li {
  width: 37px;
  margin-right: 13px;
  font-size: 18px;
  color: #1A70AD;
}

.header .text li:nth-child(2) {
  color: #36A46E;
}

.header .text li:nth-child(3) {
  margin-right: 46px;
}

.header .picture {
  display: flex;
}

.header .picture li {
  width: 52px;
  height: 52px;
  padding-left: 10px;
  border-radius: 8px;
  margin-top: 8px;
  margin-right: 20px;
  background-color: rgba(54, 164, 110, 0.3);
}

.header .picture li:nth-child(3) {
  margin-right: 50px;
}

.header .picture span {
  font-size: 33px;
  color: #36A46E;
}

.header .title {
  display: flex;
  position: relative;
  width: 206px;
  height: 52px;
  background-color: #1A70AD;
  border-radius: 8px;
}

.header .title p {
  margin-left: 13px;
  height: 52px;
  line-height: 52px;
  color: #FFFFFF;
  font-size: 18px;
}

.header .title img {
  border-radius: 50%;
  position: absolute;
  right: -50px;
  width: 56px;
}
</style>